//自定义hook写法:
import React from 'react';

//引入自定义hook模块
import useInfo from './service/useInfo';

//AppByHook组件
function AppByHook() {
  //使用自定义hook
  const info = useInfo();

  //组件html字符串
  function itemTpl(item) {
    var tpl = '';
    //遍历数组里的key,value并组装li标签
    for (var [key, value] of Object.entries(item)) {
      //递归嵌套的对象
      if (typeof value === 'object') {
        //子节点是对象，递归，拼接li
        tpl += `<ul><li>${key}: ${itemTpl(value)}</li></ul>`;
      } else {
        //子节点不是对象，拼接li
        tpl += `<li>${key}: ${value}</li>`;
      }
    }
    return tpl;
  }

  // console.log(info);
  //[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

  //返回useList钩子的执行 传入属性和方法
  return useList(info, itemTpl);
}

//useList钩子
function useList(info, itemTpl) {
  return (
    <ul
      dangerouslySetInnerHTML={{
        __html: info.map((item) => itemTpl(item))
      }}
    ></ul>
  );
}

export default AppByHook;
